<template>
    <div>

<h2>房号显示</h2>
<input type="button" value="添加" class="btn btn-info" @click="Add">
<div>
    <span>房间号:</span>
    <input type="text" v-model="model.Code">
    <input type="button" value="查询" class="btn btn-success" @click="GetList">
</div>
<table class="table">
<tbody>
    <tr>
        <td>房间号</td>
        <td>房型名称</td>
        <td>备注</td>
        <td>状态</td>
        <td>操作</td>
    </tr>


    <tr v-for="item in list":key="item.Id">
        <td>{{item.Code}}</td>
        <td>{{item.Name}}</td>
        <td>{{item.BeiZhu}}</td>
        <td>{{item.State?"上架" :"下架"}}</td>
        <td>
            <input type="button" value="删除" class="btn btn-danger" @click="housedel(item.Id)">
        </td>
    </tr>

</tbody>
</table>

    </div>
</template>

<script setup lang="ts">

import { ref,reactive, onMounted } from 'vue';
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();


//跳转
const Add=()=>{
router.push('/houseAdd')


}

let model=reactive({
Code:'',
})

const list:any=ref([]);


onMounted(()=>{
GetList();
})



const GetList=()=>{
axios({
url:'https://localhost:7190/api/House/HouseList',
method:'get',
params:model,
})

.then((res)=>{
console.log(res);
list.value=res.data;

})

.catch((ree)=>{
console.log(ree);
})

}

//删除 
const housedel=(Id:any)=>{
var f=(confirm('确定要删除吗?'))

if(f){

axios({
url:'https://localhost:7190/api/House/HouseDel',
method:'delete',
params:{
    Id:Id,
}

})

.then((res)=>{
console.log(res);
if(res.data>0){
    alert('删除成功');
    GetList();
    return;
}
else{
    alert('删除失败');
    return;
    
}


})

.catch((ree)=>{
console.log(ree);
})



}

}
</script>

<style scoped>

</style>